
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>智慧教室 - By:杨春</title>
		<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>

		<style>
			button {
				background-color: #0000AA;
				color: #FFFFFF;
				font-size: 1em;
				border-radius: 10px;
			}

			p {
				font-size: 1.5em;
			}

		</style>
	</head>

	<body>
		<p style="color: green; font-size: 1.5em;">温度：<span id="temperature">Loading...</span></p>
		<p style="color: green; font-size: 1.5em;">湿度：<span id="humidity">Loading...</span></p>

		<p>灯光控制：<button id="LightOn">开 灯</button></p>
		<p>报警控制：<button id="BeepOn">报 警</button></p>

		<script>
			const deviceId = 'ycu';
			const clientId = 'mqttjs_' + Math.random().toString(16).substr(2, 8);
			const host = 'ws://itmojun.com:8083/mqtt';
			const options = {
				keepalive: 60,
				clientId: clientId,
				protocolId: 'MQTT',
				protocolVersion: 4,
				clean: true,
				reconnectPeriod: 1000,
				connectTimeout: 30 * 1000,
				will: {
					topic: 'WillMsg',
					payload: 'Connection Closed abnormally..!',
					qos: 0,
					retain: false
				},
			};

			// 连接 MQTT 服务器
			const client = mqtt.connect(host, options);

			// 如果连接 MQTT 服务器成功
			client.on('connect', function() {
				console.log('Connected');

				// 订阅传感器主题
				client.subscribe(deviceId + '/sensor/+', function(err) {
					if (!err) {
						console.log('订阅主题: led');
					}
				});

				// 订阅设备状态主题
				client.subscribe(deviceId + '/state/+', function(err) {
					if (!err) {
						console.log('订阅主题: led');
					}
				});

			});

			// 接收服务器消息
			client.on('message', function(topic, message) {
				//console.log('Received Message: ' + topic + ' : ' + message.toString());

				if (topic === deviceId + '/sensor/dht11') {
					const data =message.toString();
					// 温度湿度数据是以下划线分隔的字符串，例如 "25.3_60"
					const parts = data.split('_');
					if (parts.length === 2) {
						document.getElementById('temperature').innerText = parts[0] + ' °C';
						document.getElementById('humidity').innerText = parts[1] + ' %RH';
					}
				}
				else if(topic === deviceId + '/state/led') {
					// 处理 LED 状态更新
					if(message.toString() === '1') {
						document.getElementById('LightOn').innerText = '关 灯';
					} else {
						document.getElementById('LightOn').innerText = '开 灯';
					}
				}
				else if(topic === deviceId + '/state/beep') {
					// 处理报警状态更新
					if(message.toString() === '1') {
						document.getElementById('BeepOn').innerText = '静 音';
					} else {
						document.getElementById('BeepOn').innerText = '报 警';
					}					
				}
			});

			// 按钮事件
			document.getElementById('LightOn').addEventListener('click', function() {
				var message = 'b';  // 关灯命令
				
				if(this.innerText === '开 灯') {
					message = 'a'; // 开灯命令
				}

				client.publish(deviceId + '/cmd', message);
			});

			document.getElementById('BeepOn').addEventListener('click', function() {
				var message = 'd'; // 静音命令
				if(this.innerText === '报 警') {
					message = 'c'; // 报警命令
				}

				client.publish(deviceId + '/cmd', message);
			});

		</script>
	</body>
</html>